Lazy Loading

Lazy Loading là gì?

Lazy loading trì hoãn việc tải ảnh ngoài màn hình cho đến khi người dùng cuộn gần tới chúng. Điều này giảm thời gian tải trang ban đầu, tiết kiệm bandwidth và cải thiện Core Web Vitals.

Tải trang ban đầu nhanh hơn
Tiết kiệm bandwidth
Điểm LCP và TTI tốt hơn
Trải nghiệm mobile tốt hơn

Chọn Demo

🏷️

Native Lazy Loading

Dùng thuộc tính HTML native loading="lazy" — không cần JavaScript.

Ưu điểm

Không cần JavaScript
Trình duyệt tối ưu sẵn
Dùng ngay không cần cấu hình

Nhược điểm

Kiểm soát hành vi hạn chế
Không có animation tuỳ chỉnh

Mở Demo Native →

🔍

Intersection Observer

Dùng IntersectionObserver API của JavaScript để kiểm soát hoàn toàn hành vi tải.

Ưu điểm

Kiểm soát hoàn toàn việc tải
Animation & hiệu ứng tuỳ chỉnh
Ngưỡng kích hoạt có thể cấu hình

Nhược điểm

Yêu cầu JavaScript
Cần nhiều code hơn

Mở Demo Observer →

So Sánh

Tiêu chí	Native Lazy	Intersection Observer
Độ phức tạp	Đơn giản	Vừa phải
Tuỳ chỉnh	Rất hạn chế	Tuỳ chỉnh hoàn toàn
Hiệu năng	Tối ưu bởi trình duyệt	Phụ thuộc triển khai
Animation khi tải	Không có	Tuỳ chỉnh hoàn toàn
Xử lý lỗi	Cơ bản	Nâng cao